<template>
    <div class="container">
      <!-- <svg id="barcode" /> -->
        <div class="opt-area-02">
            <div class="right-con">
              <div class="input-frame" style="width: 164px">
                  <Input type="text" @on-click="selectlist(1)" placeholder="采集点编号" style="width: 164px" v-model="params.place_code"
                          icon="ios-search"/>
              </div>
              <Button type="info" size="small" @click="selectlist(1)" style="margin-top: 5px">搜索</Button>
              <Button type="info" size="small" @click="setAcquisition('add')" style="margin-top: 5px;margin-left:5px">采集点设置</Button>
            </div>
        </div>
        <Table :loading="countData.loading" border :columns="columns1" :data="fcDataList" size="small" ref="table">
            <template slot="action" slot-scope="{ row }">
                <Row style="margin-bottom: 5px; margin-top: 2px">
                    <Button class="table-action-btn" type="info" size="small" v-if="row.num == 0" @click="deleteAcquisition(row)">删除</Button>
                    <Button class="table-action-btn" type="success" size="small" @click="acquisitiondetail(row)">详情</Button>
                    <!-- <Button class="table-action-btn" type="primary" size="small" @click="persondetail(row)">人员明细</Button>
                    <Button class="table-action-btn" type="success" size="small" @click="vehicledetail(row)" style="margin-top:2px">车辆明细</Button> -->
                </Row>
            </template>
        </Table>
        <Row type="flex" justify="end" class="page_style">
          <Page :current="currentPageNo" :total="totalnum" show-sizer :page-size="currentPageSize"
                show-total @on-change="changePageNo" @on-page-size-change="pageSizeChange"/>
        </Row>
        <Modal v-model="personShow" title="采集点人员明细" width="1000" :closable="false">
          <Table border :columns="columns2" :data="data2">
            <template slot-scope="{ row }" slot="state">
              <span v-if="row.state == '0'">未取消</span>
              <span v-if="row.state == '1'">已取消</span>
            </template>
          </Table>
          <Row type="flex" justify="end" class="page_style">
            <Page :current="currentPageNo1" :total="totalnum1" :page-size="currentPageSize1"
                  show-total @on-change="changePageNo1"/>
          </Row>
        </Modal>
        <Modal v-model="vehicleShow" title="采集点车辆明细" width="1000" :closable="false">
          <Table border :columns="columns3" :data="vehicleList">
            <template slot-scope="{ row }" slot="state">
              <span v-if="row.state == '0'">未取消</span>
              <span v-if="row.state == '1'">已取消</span>
            </template>
          </Table>
          <Row type="flex" justify="end" class="page_style">
            <Page :current="currentPageNo2" :total="totalnum2" :page-size="currentPageSize2"
                  show-total @on-change="changePageNo2"/>
          </Row>
        </Modal>
        <Modal v-model="acquisition.modal" :title="acquisition.title" @on-ok="okAcquisition" @on-cancel="cancelAcquisition">
          <Form label-position="right" :label-width="100">
            <Row class="mb20">
              <Col span="7" class="ivu-form-item-label">采集点名称：</Col>
              <Col span="14" class="ivu-form-item-content">
                <Input type="text" v-model="formItem.place_name" placeholder="采集点名称"></Input>
              </Col>
            </Row>
            <Row class="mb20">
              <Col span="7" class="ivu-form-item-label">采集点负责人：</Col>
              <Col span="14" class="ivu-form-item-content">
                <Input type="text" v-model="formItem.place_person" placeholder="采集点负责人"></Input>
              </Col>
            </Row>
            <Row class="mb20">
              <Col span="7" class="ivu-form-item-label">采集点类型：</Col>
              <Col span="14" class="ivu-form-item-content">
                <Select v-model="formItem.place_type" placeholder="请选择采集点类型" filterable>
                  <Option v-for="obj in place_type_arr" :value="obj.value" :key="obj.value">{{obj.label}}</Option>
                </Select>
              </Col>
            </Row>
            <Row class="mb20" v-show="formItem.place_type == '0'">
              <Col span="7" class="ivu-form-item-label">区属编码：</Col>
              <Col span="14" class="ivu-form-item-content">
                <Select v-model="formItem.place_type_code" placeholder="请选择区属编码" filterable>
                  <Option v-for="obj in quArr" :value="obj.code" :key="obj.code">{{obj.name}}</Option>
                </Select>
              </Col>
            </Row>
            <Row class="mb20">
              <Col span="7" class="ivu-form-item-label">采集点地址：</Col>
              <Col span="14" class="ivu-form-item-content">
                <Input type="text" v-model="formItem.place_address" placeholder="采集点地址"></Input>
              </Col>
            </Row>
            <Row class="mb20">
              <Col span="7" class="ivu-form-item-label">采集点类型2：</Col>
              <Col span="14" class="ivu-form-item-content">
                <Select v-model="formItem.place_type2" placeholder="请选择采集点类型2" filterable>
                  <Option value="0">社区</Option>
                  <Option value="1">学校</Option>
                  <Option value="2">其他第三方机构</Option>
                </Select>
              </Col>
            </Row>
          </Form>
          <div slot="footer">
            <Button type="success" @click="okAcquisition()">确定</Button>
            <Button type="error" @click="cancelAcquisition()">关闭</Button>
          </div>
        </Modal>
    </div>
</template>

<script>
import { getQuList, getPlaceCJList, deletePlaceCjByCode, updatePlaceCJByCode, createPlaceJC } from '@/api/nucleic-acid-detection'
// import { date0str } from '@/api/eventlist'
export default {
  name: 'list',
  data () {
    return {
      place_type_arr: [
        {
          value: '0', label: '区属'
        },
        {
          value: '1', label: '市属'
        }
      ],
      appoint_code: '',
      flag: '',
      errorTitle: '错误',
      formItem: {},
      dateArr: [], // 时间数组
      acquisition: {
        modal: false,
        title: '采集点设置'
      },
      personShow: false,
      vehicleShow: false,
      sampleObj: {
        modal1: false, // 修正结果模态框
        sample_result: '',
        sample_code: ''
      },
      loadData: false,
      countData: {
        loading: false
      },
      searchInfo: {},
      params: {
        pageNo: 1,
        pageSize: 10,
        place_code: ''
      },
      params1: {
        pageNo: 1,
        pageSize: 10,
        sample_code: '',
        sample_status: '',
        sample_result: ''
      },
      params2: {
        pageNo: 1,
        pageSize: 10
      },
      currentPageNo: 1,
      currentPageSize: 10,
      totalnum: 0,
      currentPageNo1: 1,
      currentPageSize1: 10,
      totalnum1: 0,
      currentPageNo2: 1,
      currentPageSize2: 10,
      totalnum2: 0,
      currentPageNo3: 1,
      currentPageSize3: 10,
      totalnum3: 0,
      columns1: [ // 采集点列表
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '采集点编号', key: 'place_code', width: 200, align: 'center' },
        { title: '采集点名称', key: 'place_name', width: 150, align: 'center' },
        { title: '采集点负责人', key: 'place_person', width: 80, align: 'center' },
        { title: '采集点类型', key: 'place_type', width: 100, align: 'center' },
        { title: '区属编码', key: 'place_type_code', width: 120, align: 'center' },
        { title: '采集点地址', key: 'place_address', width: 200, align: 'center' },
        { title: '采集点类型2', key: 'place_type2', width: 150, align: 'center' },
        { title: '创建时间', key: 'create_time', width: 120, align: 'center' },
        { title: '创建账号', key: 'create_by', width: 100, align: 'center' },
        { title: '操作', align: 'center', width: 150, slot: 'action', fixed: 'right' }
      ],
      fcDataList: [],
      columns2: [ // 人员列表
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '姓名', key: 'person_name', width: 80, align: 'center' },
        { title: '证件号码', key: 'person_card_no', align: 'center' },
        { title: '联系电话', key: 'person_mobile', align: 'center' },
        { title: '人员类型', key: 'person_type', align: 'center' },
        { title: '创建时间', key: 'create_time', align: 'center' },
        { title: '创建账号', key: 'create_by', align: 'center' }
      ],
      columns3: [ // 车辆列表
        { title: '序号', type: 'index', width: 60, align: 'center' },
        { title: '车牌号', key: 'car_no', width: 80, align: 'center' },
        { title: '车辆品牌型号', key: 'car_name', align: 'center' },
        { title: '司机身份证号码', key: 'person_card_no', align: 'center' },
        { title: '司机姓名', key: 'person_name', align: 'center' },
        { title: '司机手机号', key: 'person_mobile', align: 'center' },
        { title: '创建时间', key: 'create_time', align: 'center' },
        { title: '创建账号', key: 'create_by', align: 'center' }
      ],
      data2: [], // 预约人明细列表
      quArr: [], // 区列表
      vehicleList: [] // 车辆列表
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  watch: {
  },
  methods: {
    setAcquisition (flag) { // 设置预约
      this.flag = flag
      this.formItem = {}
      this.acquisition.modal = true
    },
    okAcquisition () { // 保存预约
      if (this.formItem.place_name === '' || this.formItem.place_name === undefined) {
        const content = '<p>请填写采集点名称</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.formItem.place_person === '' || this.formItem.place_person === undefined) {
        const content = '<p>请填写采集点负责人</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.formItem.place_type === '' || this.formItem.place_type === undefined) {
        const content = '<p>请选择采集点类型</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.formItem.place_type === '0') {
        if (this.formItem.place_type_code === '' || this.formItem.place_type_code === undefined) {
          const content = '<p>请选择区属编码</p>'
          this.$Modal.error({
            title: this.errorTitle,
            content: content
          })
          return
        }
      }
      if (this.formItem.place_address === '' || this.formItem.place_address === undefined) {
        const content = '<p>请填写采集点地址</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      if (this.formItem.place_type2 === '' || this.formItem.place_type2 === undefined) {
        const content = '<p>请填写采集点类型2</p>'
        this.$Modal.error({
          title: this.errorTitle,
          content: content
        })
        return
      }
      var url = ''
      if (this.flag === 'add') {
        url = createPlaceJC
      } else if (this.flag === 'edit') {
        url = updatePlaceCJByCode
      }
      url(this.formItem).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '设置采集点成功',
            desc: res.data.errmsg
          })
          this.acquisition.modal = false
          this.getList()
        } else {
          this.$Notice.error({
            title: '设置采集点失败',
            desc: res.data.errmsg
          })
          this.getList()
          // console.log(this.fcDataList, 'leibiao ')
        }
      })
    },
    cancelAcquisition () { // 关闭预约
      this.acquisition.modal = false
    },
    showdetail (item, flag) { // 编辑
      this.flag = flag
      this.appointObj.modal = true
      this.formItem = item
    },
    acquisitiondetail (item) { // 预约详情
      this.$router.push({
        path: '/acquisition-detail',
        query: {
          place_code: item.place_code
        }
      })
      // this.$router.push({
      //   name: 'acquisition-detail',
      //   params: { place_code: item.place_code }
      // })
      // this.personShow = true
      // this.appoint_code = item.appoint_code
      // this.getPersonList(item.appoint_code, 1)
    },
    deleteAcquisition (item) { // 删除预约
      if (confirm('确定删除吗')) {
        deletePlaceCjByCode({ place_code: item.place_code }).then(res => {
          if (res.data.errcode === 0) {
            this.$Notice.success({
              title: '删除成功',
              desc: res.data.errmsg
            })
            this.getList()
          } else {
            this.$Notice.error({
              title: '删除失败',
              desc: res.data.errmsg
            })
          }
        })
      }
    },
    pageAction (page) {
      this.params.pageNo = page
      this.getList()
    },
    selectlist () {
      this.params.pageNo = 1
      this.getList()
    },
    getList () { // 获取采集点列表
      getPlaceCJList(this.params).then(res => {
        if (res.data.errcode === 0) {
          this.fcDataList = res.data.data.results
          for (var i = 0; i < this.fcDataList.length; i++) {
            for (var j = 0; j < this.place_type_arr.length; j++) {
              if (this.fcDataList[i].place_type === this.place_type_arr[j].value) {
                this.fcDataList[i].place_type = this.place_type_arr[j].label
              }
            }
            for (var k = 0; k < this.quArr.length; k++) {
              if (this.fcDataList[i].place_type2 === this.quArr[j].code) {
                this.fcDataList[i].place_type_code = this.quArr[j].name
              }
            }
          }
          this.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({
            title: '查询列表信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    changePageNo (pageNo) {
      console.log(pageNo, '页数')
      this.currentPageNo = pageNo
      this.params.pageNo = pageNo
      this.getList(this.params)
    },
    changePageNo1 (pageNo) { // 预约人员列表页码切换
      console.log(pageNo, '页数')
      this.currentPageNo1 = pageNo
      this.params1.pageNo = pageNo
      this.getPersonList(this.appoint_code, pageNo)
    },
    changePageNo2 (pageNo) { // 预约人员列表页码切换
      console.log(pageNo, '页数')
      this.currentPageNo2 = pageNo
      this.params2.pageNo = pageNo
      this.getPersonList(this.appoint_code, pageNo)
    },
    getPersonList (appoint_code, pageNo) { // 获取人员列表
      let param = {
        appoint_code: appoint_code,
        pageNo: pageNo,
        pageSize: 10
      }
      getAppointPersonList(param).then(res => {
        if (res.data.errcode === 0) {
          this.vehicleList = res.data.data.results
          this.totalnum1 = res.data.data.totalRecord
          console.log(this.data2, '明细列表')
        } else {
          this.$Notice.error({
            title: '获取预约人员列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    getVehicleList (appoint_code, pageNo) { // 获取车辆列表
      let param = {
        appoint_code: appoint_code,
        pageNo: pageNo,
        pageSize: 10
      }
      getAppointPersonList(param).then(res => {
        if (res.data.errcode === 0) {
          this.data2 = res.data.data.results
          this.totalnum1 = res.data.data.totalRecord
          console.log(this.data2, '车辆列表')
        } else {
          this.$Notice.error({
            title: '获取车辆列表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    },
    cancel () {
      this.personShow = false
    },
    getQuCodeList () { // 获取区列表
      getQuList({}).then(res => {
        if (res.data.errcode === 0) {
          this.quArr = res.data.data
        } else {
          this.$Notice.error({
            title: '获取区列表失败',
            desc: res.data.errmsg
          })
        }
      })
    }
  },
  mounted () {
    var aa = document.getElementById('aaa')
    console.log(aa, 'aaaa')
    this.getList()
    this.getQuCodeList()
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
    .title-style {
      color: red;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mt20 {
      margin-top: 20px;
    }
    .ivu-table-row {
      height: 57px;
    }
  .ivu-form-item-label {
    margin-top: 8px;
  }
    .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
      from { transform: rotate(0deg);}
      50%  { transform: rotate(180deg);}
      to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
      height: 100px;
      position: relative;
      /*border: 1px solid #eee;*/
    }
</style>
